<template>
  <!-- 模型选择和原始提示词输入区 -->
  <div class="section">
    <h2>1. 开始优化</h2>
    <div class="input-group">
      <label for="model-select">选择模型:</label>
      <select id="model-select" :value="selectedModelId" @change="$emit('update:selectedModelId', $event.target.value)" :disabled="isProcessing">
        <option :value="null" disabled>-- 请选择一个启用的模型 --</option>
        <option v-for="model_item in enabledModels" :key="model_item.id" :value="model_item.id">
          {{ model_item.display_name }}
        </option>
      </select>
    </div>
    <div class="input-group">
      <label for="original-prompt">原始提示词:</label>
      <textarea
        id="original-prompt"
        :value="originalPrompt"
        @input="$emit('update:originalPrompt', $event.target.value)"
        placeholder="请输入您的原始提示词..."
        rows="6"
        :disabled="isProcessing || !selectedModelId"
      ></textarea>
    </div>
    <button @click="$emit('submit-prompt')" :disabled="!originalPrompt.trim() || isProcessing || !selectedModelId">
      {{ isProcessing && !currentQuestions.length && !isReadyToOptimize ? '处理中...' : '提交原始提示词' }}
    </button>
  </div>

  <!-- AI 交互区 -->
  <div class="section ai-interaction-area">
    <h2>2. AI 交互</h2>
    <div v-if="currentQuestions.length > 0" class="ai-question-table">
      <p><strong>AI 提示词架构师：</strong>请提供以下信息以构建您的专业提示词。</p>
      <table>
        <thead>
          <tr>
            <th>问题</th>
            <th>您的回答</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="q in currentQuestions" :key="q.id">
            <td>{{ q.question }}</td>
            <td>
              <textarea
                :value="userAnswers[q.id]"
                @input="$emit('update:userAnswer', { questionId: q.id, answer: $event.target.value })"
                :placeholder="`为更生成更精确的提示词，请回复AI的问题`"
                rows="2"
                :disabled="isProcessing"
              ></textarea>
            </td>
          </tr>
        </tbody>
      </table>
      <button @click="$emit('submit-answer')" :disabled="isProcessing || !allQuestionsAnswered">
        {{ isProcessing && currentQuestions.length > 0 ? '发送中...' : '提交所有回答' }}
      </button>
    </div>
    <div v-else-if="isReadyToOptimize" class="ai-ready">
      <p><strong>AI 提示词架构师：</strong> {{ readyToOptimizeMessage }}</p>
      <button @click="$emit('finalize-optimization')" :disabled="isProcessing">
        {{ isProcessing && isReadyToOptimize ? '生成中...' : '生成最终优化提示词' }}
      </button>
    </div>
    <div v-else-if="!optimizedPrompt && !isProcessing && !currentQuestions.length" class="ai-initial-message">
      <p>选择一个模型并提交您的原始提示词以开始。</p>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, computed } from 'vue';

const props = defineProps({
  selectedModelId: [String, Number],
  enabledModels: Array,
  originalPrompt: String,
  isProcessing: Boolean,
  currentQuestions: Array,
  userAnswers: Object,
  isReadyToOptimize: Boolean,
  readyToOptimizeMessage: String,
  optimizedPrompt: String,
});

defineEmits([
  'update:selectedModelId',
  'update:originalPrompt',
  'update:userAnswer',
  'submit-prompt',
  'submit-answer',
  'finalize-optimization',
]);

const allQuestionsAnswered = computed(() => {
  if (props.currentQuestions.length === 0) return false;
  return props.currentQuestions.every(q => props.userAnswers[q.id] && props.userAnswers[q.id].trim() !== '');
});
</script>

<style scoped>
.section {
  background-color: #ffffff;
  padding: 30px; /* Increased padding */
  border-radius: 12px; /* More rounded corners */
  margin-bottom: 25px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Softer, more prominent shadow */
  border: 1px solid #f0f0f0; /* Subtle border */
}

h2 {
  color: #2c3e50; /* Darker blue for headings */
  margin-top: 0;
  margin-bottom: 20px; /* More space below heading */
  font-size: 1.8em; /* Larger heading */
  border-bottom: 2px solid #e0e0e0; /* Slightly darker separator */
  padding-bottom: 10px; /* More padding below separator */
  font-weight: 600; /* Semi-bold */
}

.input-group {
  margin-bottom: 20px; /* More space between input groups */
}
.input-group label {
  display: block;
  margin-bottom: 8px; /* More space below label */
  font-weight: 600; /* Semi-bold */
  color: #444; /* Slightly darker label color */
  font-size: 1.1em; /* Larger label font */
}
.input-group textarea,
.input-group select {
  width: 100%;
  padding: 12px; /* More padding */
  border: 1px solid #c0c0c0; /* Slightly darker border */
  border-radius: 8px; /* More rounded corners */
  font-size: 1.05em; /* Slightly larger font */
  box-sizing: border-box;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.input-group textarea:focus,
.input-group select:focus {
  border-color: #007bff; /* Highlight on focus */
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
  outline: none;
}
.input-group textarea {
   min-height: 120px; /* Taller textarea */
   resize: vertical;
}

button {
  background-color: #007bff; /* Primary blue for main actions */
  color: white;
  padding: 12px 25px; /* More padding */
  border: none;
  border-radius: 8px; /* More rounded */
  cursor: pointer;
  font-size: 1.05em; /* Slightly larger font */
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  margin-right: 15px; /* Consistent margin */
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2); /* Subtle shadow */
}
button:last-child {
  margin-right: 0;
}
button:hover:not(:disabled) {
  background-color: #0056b3; /* Darker blue on hover */
  transform: translateY(-1px); /* Slight lift */
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}
button:active {
  transform: translateY(0);
}
button:disabled {
  background-color: #e0e0e0; /* Lighter disabled color */
  cursor: not-allowed;
  box-shadow: none;
}

.ai-interaction-area {
  min-height: 150px; /* Increased min-height */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.ai-question-table table {
  width: 100%;
  border-collapse: separate; /* Use separate for rounded corners */
  border-spacing: 0;
  margin-bottom: 20px; /* More space below table */
  border-radius: 8px; /* Rounded table corners */
  overflow: hidden; /* Ensures rounded corners apply */
}
.ai-question-table th, .ai-question-table td {
  border: 1px solid #e0e0e0; /* Lighter border */
  padding: 12px; /* More padding */
  text-align: left;
}
.ai-question-table th:first-child,
.ai-question-table td:first-child {
  width: 60%;
}
.ai-question-table th:nth-child(2),
.ai-question-table td:nth-child(2) {
  width: 40%;
}
.ai-question-table th {
  background-color: #f8f8f8; /* Lighter header background */
  color: #333;
  font-weight: 600;
}
.ai-question-table tr:first-child th:first-child { border-top-left-radius: 8px; }
.ai-question-table tr:first-child th:last-child { border-top-right-radius: 8px; }
.ai-question-table tr:last-child td:first-child { border-bottom-left-radius: 8px; }
.ai-question-table tr:last-child td:last-child { border-bottom-right-radius: 8px; }

.ai-question-table textarea {
  width: 100%;
  min-height: 60px; /* Taller textarea */
  margin-bottom: 0;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #c0c0c0;
  border-radius: 6px; /* Slightly less rounded than main inputs */
  font-size: 1em;
  resize: vertical;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.ai-question-table textarea:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
  outline: none;
}

.ai-ready p, .ai-initial-message p {
  width: 100%;
  text-align: left;
  padding: 15px 20px; /* More padding */
  border-radius: 10px; /* More rounded */
  margin-bottom: 20px;
  line-height: 1.7; /* Increased line height for readability */
  font-size: 1.1em;
}
.ai-ready p {
  background-color: #d4edda; /* Lighter green for success */
  color: #155724; /* Darker green text */
  border: 1px solid #c3e6cb;
}
.ai-initial-message p {
  color: #6c757d; /* Muted grey */
  font-style: italic;
  text-align: center;
  background-color: #f8f9fa; /* Light background */
  border: 1px solid #e9ecef;
}
</style>
